<template>
	<view class="call_friend">
		<!-- 顶部的输入信息 -->
		<view class="top">
			<view class="info">朋友信息</view>
			<view class="info_tip">司机会直接联系乘客，请提前通知乘车人准备出行</view>

			<input v-model="phone" @input="inputAction" class="phone" placeholder-style="color:##CDCDCD" focus type="number" maxlength="11" placeholder="手机号码" />

			<!-- 分割线 -->
			<view class="line"></view>

			<input v-model="name" class="name" placeholder-style="color:##CDCDCD" type="text" maxlength="20" placeholder="乘车人姓名(选填)" />
		</view>

		<!-- 按钮部分 -->
		<view @tap="doCommitAction" :class="['bt_commit', isLight ? 'bt_light' : 'bt_gray']">立即下单</view>
		
		<u-toast ref="uToast" />
	</view>
	
</template>
<script>
export default {
	data() {
		return {
			//按钮是否高亮
			isLight: false,
			//输入的电话号码
			phone: '',
			//输入的姓名
			name: ''
		};
	},
	methods: {
		
		//输入事件
		inputAction() {
			if (this.phone.length >=11) {
				this.isLight = true;
			} else {
				this.isLight = false;
			}
		},
		
		//立即下单
		doCommitAction(){
			if(this.checkValidTel(this.phone,"手机号码")){
				//验证通过 关闭当前页面,上一页面进行下单操作
				uni.$emit("create_order",{friendTel:this.phone,friendName:this.name})
				//关闭当前页面
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
};
</script>

<style lang="less">
@import url('call_friend.less');
</style>
